<template>
  <div :id="containerId"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "EChart",
  props: {
    option: undefined
  },
  data() {
    return {
      containerId: Math.round(Math.random() * 100000000) + "",
      handleResize: () => this.myChart.resize()

    }
  },
  mounted() {
    this.loadChart(this.option);
    window.addEventListener('resize', this.handleResize);
  },
  computed: {
    myChart(){
      return echarts.init(document.getElementById(this.containerId));
    }
  },
  watch: {
    option(newOption){
      this.loadChart(newOption);
    }
  },
  methods: {
    loadChart(option){
      //this.myChart.clear();
      option && this.myChart.setOption(option);
    }
  },
  beforeDestroy() {
    this.myChart.dispose();
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style scoped>

</style>
